<template>
    <div class="layout-padding-view">
        <splitpanes horizontal>
            <pane size='50'>
                <div class="layout-padding-auto layout-padding-view">
                    <b><el-text class="mx-1" type="primary" size="large"
                            style="font-size: 20px;margin-right:90%;">基础信息</el-text></b>
                    <!--表单-->
                    <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

                        <el-form-item :label="$t('basItemRoute.materialCode')" prop="materialCode">
                            <el-input v-model="state.queryForm.materialCode" clearable
                                :placeholder="$t('basItemRoute.enterMaterialCode')" />
                        </el-form-item>

                        <el-form-item :label="$t('basItemRoute.routeVerison')" prop="routeVerison">
                            <el-input v-model="state.queryForm.routeVerison" clearable
                                :placeholder="$t('basItemRoute.enterRouteVerison')" />
                        </el-form-item>
                    </el-form>
                    <b><el-text class="mx-1" type="success" size="large"
                            style="font-size: 20px;margin-right:90%;">基础信息</el-text></b>
                    <!--查询表单-->
                    <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

                        <el-form-item :label="$t('basItemRoute.materialCode')" prop="materialCode">
                            <el-input v-model="state.queryForm.materialCode" clearable
                                :placeholder="$t('basItemRoute.enterMaterialCode')" />
                        </el-form-item>

                        <el-form-item :label="$t('basItemRoute.routeVerison')" prop="routeVerison">
                            <el-input v-model="state.queryForm.routeVerison" clearable
                                :placeholder="$t('basItemRoute.enterRouteVerison')" />
                        </el-form-item>
                    </el-form>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" @click="getDataList">
                            {{ $t('basItemRoute.query') }}
                        </el-button>
                    </el-form-item>
                </div>
            </pane>
            <pane size='50'>
                <div class="layout-padding-auto layout-padding-view">
                    <el-tabs model-value="first">
                        <el-tab-pane name="first">
                            <template #label>
                                <span class="ml-0.5">
                                    {{ $t('basItemRoute.processRoute') }}
                                </span>
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                    <!--查询结果的列表-->
                    <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
                        style="width: 100%;height:86%" :cell-style="tableStyle.cellStyle" stripe
                        :header-cell-style="tableStyle.headerCellStyle">
                        <el-table-column prop="salesOrderCode" :label="$t('dailyDeliveryData.salesOrderCode')" />
                        <el-table-column prop="dnCode" :label="$t('dailyDeliveryData.dnCode')" />
                        <el-table-column prop="dnLine" :label="$t('dailyDeliveryData.dnLine')" width="115px" />
                        <el-table-column prop="materialCode" :label="$t('dailyDeliveryData.materialCode')" width="100px" />
                        <el-table-column prop="materialName" :label="$t('dailyDeliveryData.materialName')" />
                        <el-table-column prop="spec" :label="$t('dailyDeliveryData.spec')" />
                        <el-table-column prop="deliveryDate" :label="$t('dailyDeliveryData.deliveryDate')" />v
                        <el-table-column prop="shippedDate" :label="$t('dailyDeliveryData.shippedDate')" />
                        <el-table-column prop="saleQty" :label="$t('dailyDeliveryData.saleQty')" width="90px" />
                        <el-table-column prop="scanQty" :label="$t('dailyDeliveryData.scanQty')" width="90px" />
                        <el-table-column prop="unShippedQty" :label="$t('dailyDeliveryData.unShippedQty')" width="90px" />
                        <el-table-column prop="closeStatus" :label="$t('dailyDeliveryData.closeStatus')" width="90px" />
                        <el-table-column prop="delayDays" :label="$t('dailyDeliveryData.delayDays')" width="90px" />
                    </el-table>
                    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                        v-bind="state.pagination" />
                </div>
            </pane>
        </splitpanes>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';

import { BasicTableProps, useTable } from "/@/hooks/table";

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: ""
})

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)
</script>